<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
        box-sizing: border-box;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      .window {
        position: relative;
        margin: 0 auto;
        width: 715px;
        overflow: hidden;
        height: 600px;
      }

      .box {
        width: calc(715px * 7);
        display: flex;
        /* margin-left: -715px; */
        position: absolute;
      }

      .title {
        color: #9b9b9b;
        font-size: 13px;
      }

      .title > li {
        display: inline-block;
        vertical-align: middle;
        margin-right: 12px;
      }

      .title > li:first-child {
        font-size: 16px;
        color: #111;
      }

      .title > li.click {
        color: #111;
      }

      .title > li:last-child {
        float: right;
        margin-top: 3px;
        color: #3377aa;
      }

      .title > li > a {
        color: inherit;
      }

      .title > li:not(:first-child):not(.click):hover {
        color: white;
        background-color: #3377aa;
      }

      .all {
        width: 715px;
        display: flex;
        flex-wrap: wrap;
        height: 450px;
      }

      .one {
        margin: 0 25px 10px 0;
        height: 137px;
      }

      .one > img {
        cursor: pointer;
        height: 170px;
        width: 115px;
      }

      .one > .text {
        text-align: center;
        width: 115px;
      }

      .one > .text > img {
        cursor: pointer;
        vertical-align: middle;
        width: 16px;
        display: inline-block;
      }

      .one > .text > span {
        cursor: pointer;
        vertical-align: middle;
        font-size: 13px;
        color: #3377aa;
      }

      .one > .text > strong {
        cursor: pointer;
        vertical-align: middle;
        font-size: 13px;
        color: #e09015;
      }

      hr {
        margin: 20px 0;
        height: 0px;
        border: #0002 solid 0.1px;
      }

      .con {
        margin: 20px auto;
        display: flex;
        margin-left: 250px;
        margin-top: 480px;
      }

      .check {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(img/slide_swithc_2.png) no-repeat;
        position: relative;
        top: 5px;
      }
      .checkleft {
        background-position: 0 0;
        margin-right: 5px;
      }
      .checkright {
        background-position: -18px 0;
        margin-left: 5px;
      }

      .btn {
        cursor: pointer;
        width: 6px;
        height: 6px;
        margin-right: 5px;
        display: inline-block;
        background-color: #d8d8d8;
        border-radius: 50%;
      }

      .focus {
        background-color: #6198d7;
      }
      .pointer {
        width: 74px;
      }
      .boxitem{
          position: relative;
      }
    </style>
  </head>
  <body>
    <div class="window">
      <ul class="title">
        <li><a href="#">最近热门电影</a></li>
        <li class="click"><a href="">热门</a></li>
        <li><a href="#">最新</a></li>
        <li><a href="#">豆瓣高分</a></li>
        <li><a href="#">冷门佳片</a></li>
        <li><a href="#">华语</a></li>
        <li><a href="#">欧美</a></li>
        <li><a href="#">韩语</a></li>
        <li><a href="#">日本</a></li>
        <li><a href="#">更多>></a></li>
      </ul>
      <hr />
      <div class="boxitem">
<div class="box">
        <div class="all">
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
        </div>
        <div class="all">
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
        </div>
        <div class="all">
          <div class="one">
            <img src="./img/img2.jpg" alt="" />
            <div class="text">
              <span>82年生的金智英</span>
              <strong>8.6</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img2.jpg" alt="" />
            <div class="text">
              <span>82年生的金智英</span>
              <strong>8.6</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img2.jpg" alt="" />
            <div class="text">
              <span>82年生的金智英</span>
              <strong>8.6</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img2.jpg" alt="" />
            <div class="text">
              <span>82年生的金智英</span>
              <strong>8.6</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img2.jpg" alt="" />
            <div class="text">
              <span>82年生的金智英</span>
              <strong>8.6</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img2.jpg" alt="" />
            <div class="text">
              <span>82年生的金智英</span>
              <strong>8.6</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img2.jpg" alt="" />
            <div class="text">
              <span>82年生的金智英</span>
              <strong>8.6</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img2.jpg" alt="" />
            <div class="text">
              <span>82年生的金智英</span>
              <strong>8.6</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img2.jpg" alt="" />
            <div class="text">
              <span>82年生的金智英</span>
              <strong>8.6</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img2.jpg" alt="" />
            <div class="text">
              <span>82年生的金智英</span>
              <strong>8.6</strong>
            </div>
          </div>
        </div>
        <div class="all">
          <div class="one">
            <img src="./img/img3.jpg" alt="" />
            <div class="text">
              <span>亲爱的新年好</span>
              <strong>5.7</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img3.jpg" alt="" />
            <div class="text">
              <span>亲爱的新年好</span>
              <strong>5.7</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img3.jpg" alt="" />
            <div class="text">
              <span>亲爱的新年好</span>
              <strong>5.7</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img3.jpg" alt="" />
            <div class="text">
              <span>亲爱的新年好</span>
              <strong>5.7</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img3.jpg" alt="" />
            <div class="text">
              <span>亲爱的新年好</span>
              <strong>5.7</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img3.jpg" alt="" />
            <div class="text">
              <span>亲爱的新年好</span>
              <strong>5.7</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img3.jpg" alt="" />
            <div class="text">
              <span>亲爱的新年好</span>
              <strong>5.7</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img3.jpg" alt="" />
            <div class="text">
              <span>亲爱的新年好</span>
              <strong>5.7</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img3.jpg" alt="" />
            <div class="text">
              <span>亲爱的新年好</span>
              <strong>5.7</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img3.jpg" alt="" />
            <div class="text">
              <span>亲爱的新年好</span>
              <strong>5.7</strong>
            </div>
          </div>
        </div>
        <div class="all">
          <div class="one">
            <img src="./img/img4.jpg" alt="" />
            <div class="text">
              <span>两只老虎</span>
              <strong>6.0</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img4.jpg" alt="" />
            <div class="text">
              <span>两只老虎</span>
              <strong>6.0</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img4.jpg" alt="" />
            <div class="text">
              <span>两只老虎</span>
              <strong>6.0</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img4.jpg" alt="" />
            <div class="text">
              <span>两只老虎</span>
              <strong>6.0</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img4.jpg" alt="" />
            <div class="text">
              <span>两只老虎</span>
              <strong>6.0</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img4.jpg" alt="" />
            <div class="text">
              <span>两只老虎</span>
              <strong>6.0</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img4.jpg" alt="" />
            <div class="text">
              <span>两只老虎</span>
              <strong>6.0</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img4.jpg" alt="" />
            <div class="text">
              <span>两只老虎</span>
              <strong>6.0</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img4.jpg" alt="" />
            <div class="text">
              <span>两只老虎</span>
              <strong>6.0</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img4.jpg" alt="" />
            <div class="text">
              <span>两只老虎</span>
              <strong>6.0</strong>
            </div>
          </div>
        </div>
        <div class="all">
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img5.jpg" alt="" />
            <div class="text">
              <span>我脑中的橡皮擦</span>
              <strong>7.9</strong>
            </div>
          </div>
        </div>
        <div class="all">
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
          <div class="one">
            <img src="./img/img1.jpg" alt="" />
            <div class="text">
              <span>致所有我曾爱过的男孩</span>
              <strong>6.2</strong>
            </div>
          </div>
        </div>
      </div>
      </div>
      
      <div class="con">
        <a class="check checkleft "></a>
        <ul class="pointer">
          <li class="btn focus"></li>
          <li class="btn"></li>
          <li class="btn"></li>
          <li class="btn"></li>
          <li class="btn"></li>
        </ul>
        <a class="check checkright"></a>
      </div>
    </div>
    <script>
      var box = document.querySelector(".box");
      var win = document.querySelector(".window");
      var dots = document.querySelectorAll(".btn");
      var checkleft = document.querySelector(".checkleft");
      var checkright = document.querySelector(".checkright");
      var index = 1;
      function next() {
        index++;
        if (index == 7) {
          index = 2;
          box.style.left = "-715px";
        }
        move();
      }
      function prev() {
        index--;
        if (index == -1) {
          index = 4;

          itemBox.style.left = "-2866px";
        }
        move();
      }
      var moveTimer;
      function move() {
        var offset = -715 * index - box.offsetLeft;
        var speed = offset / 30;
        var count = 0;
        clearInterval(moveTimer);
        moveTimer = setInterval(function() {
          count++;
          box.style.left = box.offsetLeft + speed + "px";
          if (count >= 30) {
            clearInterval(moveTimer);
            box.style.left = -715 * index + "px";
          }
        }, 10);
        for (var i = 0; i < dots.length; i++) {
          dots[i].classList.remove("focus");
        }
        if (index == 6) index = 1;
        if (index == 0) index = 5;
        dots[index - 1].classList.add("focus");
      }
      checkleft.onclick = function() {
        prev();
      };
      checkright.onclick = function() {
        next();
      };
      for(var i = 0; i < dots.length; i++){
        dots[i].index = i;
        dots[i].onclick = function(){
            index = this.index;
            next();
        }
    }
    </script>
  </body>
</html>
